<template>
	<view class="content">
		<u-navbar bgColor="transparent" titleStyle="color:#fff" title="矿机详情" leftIconColor="#fff" :autoBack="true"
			:placeholder="false">
		</u-navbar>
		<view class="details-box">
			<image class="details-img" :src="item.logo" mode=""></image>
			<view class="details-title">
				<view>
					{{item.name}}
				</view>
				<view class="price">
					<text>{{item.price}} </text>云矿石
				</view>
			</view>
			<view class="refund">
				<view class="refund-item way">
					返款方式
				</view>
				<view class="refund-item">
					每日返本返息
				</view>
			</view>
			<view class="time">
				<view class="time-text">
					质押赎回时间
				</view>
				<view>
					{{item.end_time}}
				</view>
			</view>
			<!-- 			<view class="title">
				经销商联系方式
			</view>
			<view class="relate">
				<view class="relate-left">
					<image src="/static/factory/chat.png" mode=""></image>
					<view>微信</view>
				</view>
				<view class="tell">
					18323456790
				</view>
			</view>
			<view class="relate">
				<view class="relate-left">
					<image src="/static/factory/qq.png" mode=""></image>
					<view>QQ</view>
				</view>
				<view class="tell">
					18323456790
				</view>
			</view>
			<view class="relate">
				<view class="relate-left">
					<image src="/static/factory/app.png" mode=""></image>
					<view>APP</view>
				</view>
				<view class="tell">
					18323456790
				</view>
			</view> -->
			<view class="income">
				<view class="income-box">
					<view class="income-item">
						<view class="item-num">
							<text>{{item.rate}}%</text>
						</view>
						<view class="item-text">
							每日收益率
						</view>
					</view>
					<view class="income-item">
						<view class="item-num">
							<text>{{item.days}}</text>天
						</view>
						<view class="item-text">
							工作期限
						</view>
					</view>
					<view class="income-item">
						<view class="item-num">
							<text>{{item.purchaseNum}}</text>次
						</view>
						<view class="item-text">
							限购次数
						</view>
					</view>
					<view class="income-item">
						<view class="item-num">
							<text>{{item.Project_cost}}</text>云矿石
						</view>
						<view class="item-text">
							到期收益
						</view>
					</view>
				</view>
				<view class="income-text">
					起购:{{item.price}}(云矿石)
				</view>
			</view>
			<view class="title" v-if="isshow=='false'">
				收益说明
			</view>
			<view class="explain" v-if="isshow=='false'">
				<view class="explain-text">
					例如:投资{{item.price}}(云矿石)
				</view>
				<view class="explain-text">
					总收益=投资金额X收益率x合约期限
				</view>
				<view class="explain-text">
					{{item.Project_cost}}(云矿石)={{item.price}}(云矿石)X{{item.rate}}%X{{item.days}}天
				</view>
			</view>
			<view class="feature" v-if="isshow=='false'">
				<view class="feature-item">
					<view class="feature-title">
						团队奖励(伞下)
					</view>
					<view class="feature-text">
						<view class="dot"></view>
						<view>
							白银级 奖励2%
						</view>
					</view>
					<view class="feature-text">
						<view class="dot"></view>
						<view>
							黄金级 奖励3%
						</view>
					</view>
					<view class="feature-text">
						<view class="dot"></view>
						<view>
							水晶级 奖励5%
						</view>
					</view>
				</view>
				<view class="feature-item">
					<view class="feature-title">
						推荐奖励
					</view>
					<view class="feature-text">
						<view class="dot"></view>
						<view>
							1 推奖励 4%
						</view>
					</view>
					<view class="feature-text">
						<view class="dot"></view>
						<view>
							2 推奖励 3%
						</view>
					</view>
					<view class="feature-text">
						<view class="dot"></view>
						<view>
							3 推奖励 1%
						</view>
					</view>
				</view>
			</view>
			<view v-if="isshow == 'true'" class="paytype">
				<view v-for="(i,x) in typelist" :key="x" @click="clicktbs(x)" class="payitem"
					:style="i.show == true?'border: 1rpx solid #A1FFA9;':''">
					<view class="pay-icon">
						<u-icon :name="i.icon" :color="i.color" size="28"></u-icon>
					</view>
					<view class="pay-text">
						{{i.name}}
					</view>
				</view>
			</view>
			<view style="height: 50rpx;"></view>
			<view class="work-btn">
				<u-button style="color: #000; border-radius: 30rpx;" color="linear-gradient( 90deg, #C8F673 0%, #98F083 100%)" type="primary" @click="clickgz" text="立即挖矿"></u-button>
			</view>
			<u-keyboard ref="uKeyboard" class="pwd-pop" @change="changePwd" @backspace="clearPwd" :show="showKeyboard"
				mode="number" :dot-enabled="false" :tooltip="false" default="">
				<view class="flex-between-center head-tab">
					<view class="title">请输入支付密码</view>
					<view class="close-text" @click="closePwd">
						<u-icon name="close-circle" size="50rpx"></u-icon>
					</view>
				</view>
				<view class="pass-input-title">支付金额</view>
				<view class="all-money">{{item.price}}<text>云矿石</text></view>
				<view style="display: flex;justify-content: center;">
					<u-code-input hairline size="43" color="#000" focus disabled-keyboard dot :space="22"
						borderColor="rgb(216, 216, 216)" v-model="password" :maxlength="6"></u-code-input>
				</view>
			</u-keyboard>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showKeyboard: false,
				password: "",
				item: {
					"id": 6,
					"name": "",
					"logo": "",
					"box_id": 0,
					"price": "-",
					"rate": "-",
					"days": 0,
					"fx_days": 0,
					"type": 1,
					"purchaseNum": 2,
					"sellNum": 0,
					"totalNum": 0,
					"Project_cost": 0,
					"box_name": null,
					"show_time": 0,
					"end_time": ""
				},
				ok: false,
				pwdList: [],
				typelist: [{
						name: '支付宝1',
						icon: 'zhifubao',
						color: '#A1FFA9',
						show: true
					},
					{
						name: '支付宝2',
						icon: 'zhifubao',
						color: '#A1FFA9',
						show: false
					},
					// {
					// 	name: '微信',
					// 	icon: 'weixin-fill',
					// 	color: '#55aa00',
					// 	show: false
					// }
				],
				index: 0,
				isshow: 'false',
				isAppleBrowser: false,
			}
		},
		onLoad(option) {
			this.getInfo(Number(option.id))
		},
		onShow() {
			this.detectBrowser()
		},
		methods: {
			
			detectBrowser() {
				const userAgent = navigator.userAgent;
				// 检测是否是苹果设备（iPhone、iPad、iPod）
				const isAppleDevice = /iPhone|iPad|iPod/i.test(userAgent);
				const isSafari = /Safari/i.test(userAgent) && !/Chrome/i.test(userAgent);
				this.isAppleBrowser = isAppleDevice && isSafari;
				console.log('isAppleBrowser:', this.isAppleBrowser);
			},
			clickgz() {
				if(this.item.id == 1){
					uni.navigateTo({
						url: '/pages/my/kefu/index'
					})
				}else{
					if (this.isshow == 'true') {
						if (this.index == 0) {
							uni.showLoading({
								mask: true,
								title: '正在唤起支付...'
							})
							this.$Request({
								method: 'POST',
								url: '/api/index/buy_now_pay',
								data: {
									num: 1,
									pay_type: 'alipay',
									id: this.item.id,
									type:2
								}
							}).then(res => {
								uni.hideLoading()
								if (res.code == 1) {
									// uni.navigateTo({
									// 	url: '/pages/factory/pay/index?url=' + res.data.payurl +
									// 		'&order=' +
									// 		res.data.trade_no + '&type=2'
									// })
									console.log(res)
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
								}
							})
						} else {
							uni.showLoading({
								mask: true,
								title: '正在唤起支付...'
							})
							this.$Request({
								method: 'POST',
								url: '/api/index/buy_now_pay',
								data: {
									num: 1,
									pay_type: 'alipay',
									id: this.item.id,
									type:2
								}
							}).then(res => {
								uni.hideLoading()
								if (res.code == 1) {
									// uni.navigateTo({
									// 	url: '/pages/factory/pay/index?url=' + res.data.payurl +
									// 		'&order=' +
									// 		res.data.trade_no + '&type=2'
									// })
									console.log(res)
								} else {
									uni.showToast({
										title: res.msg,
										icon: 'none'
									})
								}
							})
						}
					} else {
						this.showKeyboard = true
					}
				}
			},
			clicktbs(index) {
				this.typelist.map(item => {
					item.show = false
				})
				this.typelist[index].show = true
				this.index = index
			},
			changePwd(e) {
				this.pwdList.push(e)
				if (this.pwdList.length > 6) return
				if (this.pwdList.length === 6) {
					this.password += this.pwdList[this.pwdList.length - 1];
					if (this.ok) return
					this.finish()
				} else {
					this.password += e;
				}
			},
			clearPwd() {
				if (this.password.length > 0) {
					this.pwdList = this.pwdList.slice(0, -1)
					this.password = this.password.substring(0, this.password.length - 1);
				}
			},
			closePwd() {
				this.showKeyboard = false;
				this.password = ""
				this.pwdList = []
			},
			finish() {
				this.pwdList = []
				uni.showLoading()
				this.$Request({
					method: 'POST',
					url: '/api/index/buy_now',
					data: {
						num: 1,
						password: this.password,
						id: this.item.id
					}
				}).then(res => {
					uni.hideLoading()
					if (res.code == 1) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						this.password = ""
						this.showKeyboard = false;
					} else {
						this.password = ""
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			getInfo(id) {
				this.$Request({
					method: 'POST',
					url: '/api/index/product_info',
					data: {
						id,
					}
				}).then(res => {
					if (res.code == 1) {
						this.item = res.data;
						if(this.item.id == 6){
							this.isshow = 'true'
						}
						let date = new Date()
						date.setDate(date.getDate() + res.data.days)
						let year = date.getFullYear()
						let month = date.getMonth() + 1
						let day = date.getDate()
						this.item.end_time = year + '-' + (month < 10 ? '0' + month : month) + '-' + (day < 10 ?
							'0' + day : day)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			}
		}
	}
</script>
<style>
	page {
		background: #17191A;
	}
</style>
<style lang="scss" scoped>
	.content{
		min-height: 100vh;
		background-image: url('../../../static/my/my-bg.png');
		background-repeat: no-repeat;
		background-size: 100% 568rpx;
		padding-top: 88rpx;
	}
	.paytype {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 20rpx 0;
		
		.payitem {
			width: 48%;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: rgba(255, 255, 255, .05);
			border-radius: 10rpx;
			padding: 30rpx;
			margin-top: 20rpx;

			.pay-icon {}

			.pay-text {
				font-size: 28rpx;
				margin-left: 20rpx;
				color: #fff;
			}
		}

	}
	.details-box {
		padding: 30rpx;

		.details-img {
			width: 686rpx;
			height: 686rpx;
		}

		.details-title {
			margin-top: 30rpx;
			color: #fff;
			font-size: 40rpx;
			font-weight: 600;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.price {
				font-size: 24rpx;
				color: #A1FFA9;

				text {
					font-weight: 600;
					font-size: 48rpx;
				}
			}
		}

		.refund {
			width: 300rpx;
			margin-top: 20rpx;
			display: flex;
			font-size: 24rpx;
			background-color: rgba(255, 255, 255, .05);
			border-radius: 10rpx;
			overflow: hidden;
			color: #fff;

			.refund-item {
				padding: 10rpx 15rpx;
			}

			.way {
				background: linear-gradient( 90deg, #C8F673 0%, #98F083 100%);
				color: #000;
			}
		}

		.time {
			padding-top: 30rpx;
			margin-bottom: 10rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: #fff;
			font-size: 26rpx;
			font-weight: 600;

			.time-text {
				color: #999;
			}
		}

		.title {
			padding: 30rpx 0;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
		}

		.relate {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 28rpx;
			padding: 20rpx 30rpx;
			background-color: rgba(255, 255, 255, .05);
			border-radius: 30rpx;
			margin-bottom: 30rpx;

			.relate-left {
				display: flex;
				align-items: center;
				color: #999;

				image {
					width: 66rpx;
					height: 66rpx;
					margin-right: 30rpx;
				}
			}

			.tell {
				color: #fff;
			}
		}

		.income {
			padding: 30rpx;
			background: linear-gradient( 134deg, rgba(255,227,211,0.06) 0%, rgba(67,130,84,0.26) 100%);
			border: 4rpx solid rgba(108,233,137,0.12);
			border-radius: 30rpx;
			text-align: center;
			margin-top: 30rpx;
			.income-box {
				display: flex;
				justify-content: space-between;
				color: #fff;

				.income-item {
					
					.item-num {
						color: #A1FFA9;
						font-size: 24rpx;

						text {
							font-weight: 600;
							font-size: 32rpx;
						}
					}

					.item-text {
						color: #999;
						margin-top: 20rpx;
						font-size: 24rpx;
					}
				}
			}

			.income-text {
				margin-top: 30rpx;
				color: #999;
				font-size: 24rpx;
			}
		}
		.explain {
			padding: 30rpx;
			background: linear-gradient( 134deg, rgba(255,227,211,0.06) 0%, rgba(67,130,84,0.26) 100%);
			border: 4rpx solid rgba(108,233,137,0.12);
			border-radius: 30rpx;

			.explain-text {
				color: #999;
				margin-bottom: 20rpx;
				font-size: 24rpx;
			}

			.explain-text:last-child {
				margin-bottom: 0;
			}
		}

		.feature {
			display: flex;
			justify-content: space-between;
			margin-top: 40rpx;

			.feature-item {
				width: 48%;
				padding: 30rpx;
				background: linear-gradient( 134deg, rgba(255,227,211,0.06) 0%, rgba(67,130,84,0.26) 100%);
				border: 4rpx solid rgba(108,233,137,0.12);
				border-radius: 20rpx;

				.feature-title {
					color: #fff;
					font-size: 32rpx;
					font-weight: 600;
					margin-bottom: 30rpx;
				}

				.feature-text {
					font-size: 28rpx;
					color: #9909;
					display: flex;
					align-items: center;

					.dot {
						margin-right: 15rpx;
						width: 12rpx;
						height: 12rpx;
						background-color: #A1FFA9;
						border-radius: 50%;
					}
				}
			}
		}

		.project {
			margin-top: 40rpx;
			padding: 30rpx;
			background-color: rgba(255, 255, 255, .05);
			border-radius: 30rpx;
			color: #fff;
			font-size: 32rpx;
			font-weight: 600;
		}
	}

	.pwd-pop {
		border-radius: 10px 10px 0 0;
		box-sizing: border-box;
		overflow: hidden;

		.head-tab {
			display: flex;
			width: 100%;
			box-sizing: border-box;
			justify-content: center;

			.title {
				color: #000;
				font-weight: bold;
			}

			.close-text {
				position: absolute;
				right: 20rpx;
				top: 20rpx;
				color: #adaeb3;
			}
		}

		.pass-input-title {
			text-align: center;
			padding: 10rpx 0;
			color: #666;
			font-size: 26rpx;
		}

		.all-money {
			padding-bottom: 30rpx;
			margin-bottom: 20rpx;
			text-align: center;
			border-bottom: 2px solid #f5f5f5;
			font-size: 80rpx;
			font-family: "din";
			font-weight: bold;

			text {
				font-size: 28rpx;
				margin-left: 10rpx;
				font-weight: normal;
			}
		}

		.van-number-keyboard {
			width: 108%;
			margin-left: -4%;
			position: initial;
		}
	}

	/deep/ .u-keyboard {
		background-color: #fff;
		border-radius: 0 20rpx;
	}
</style>